<template>
  <div>
    <!--搜索-->
    <el-row>
      <el-col :span="24">
        <div class="search">
          <el-form :inline="true" :model="query">
            <el-form-item class="text" label="评论信息：">
              <el-input
                placeholder="请输入评论信息"
                v-model="query.content"
                size="small"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item class="text" label="评论人名称：">
              <el-input
                placeholder="请输入评论人名称"
                v-model="query.nickName"
                size="small"
                clearable>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" size="mini" type="primary" @click="onSubmit">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div style="width: auto;">
          <el-table
            :data="page.list"
            stripe
            style="width: 100%;">
            <el-table-column
              type="selection"
              align="center"
              width="55">
            </el-table-column>
            <el-table-column
              label="评论编号"
              type="index"
              width="180">
            </el-table-column>
            <el-table-column
              prop="content"
              label="评论信息"
              v-model="query.content"
              width="250">
            </el-table-column>
            <el-table-column
              prop="createDate"
              v-model="query.createDate"
              label="评论时间">
            </el-table-column>
            <el-table-column
              prop="nickname"
              v-model="query.nickName"
              label="评论人昵称">
            </el-table-column>
            <el-table-column
              prop="account"
              v-model="query.account"
              label="评论账号">
            </el-table-column>


            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini"
                           type="text"
                           icon="el-icon-edit"
                           v-if="scope.row.bannedCode!=null && scope.row.bannedCode>new Date().getTime()"
                           @click="unlock(scope.$index, scope.row)"
                >解封账户
                </el-button>
                <el-button
                  v-else
                  size="mini"
                  type="text"
                  style="color: red"
                  icon="el-icon-delete"
                  @click="bannedVisible(scope.$index, scope.row)">封禁作者
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 15px;text-align: right;">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.pageNo"
              :page-sizes="[10,20,50,100, 200, 300, 400]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.count"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>


    <el-dialog
      title="封禁账号信息"
      :visible.sync="bannedDialogVisible"
      width="30%">
      <el-form :inline="true" :model="admin" label-width="180px">
        <el-row>
          <el-form-item class="text" label="封禁账号:">
            <el-input
              v-model="admin.author"
              size="small"
              disabled
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item class="text" label="封禁原因:">
            <el-input
              placeholder="请输入封禁原因"
              v-model="admin.reason"
              size="small"
              clearable>
            </el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item class="text" label="封禁时长:">
            <el-select
              placeholder="请选择封禁时长"
              v-model="admin.bannedType"
              size="small"
              clearable>
              <el-option
                v-for="item in bannedOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="bannedDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="bannedAccount">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>

import {getArticleAll, deleteArticle} from "../../api/article";
import {commentAll} from "../../api/comment";
import {bannedAccount, unlock} from "../../api/admin";

export default {
  name: "Home",
  inject: ['reload'],
  data() {
    return {
      bannedDialogVisible: false,
      admin: {
        author: '',
        bannedType: '',
        reason: '',
        uid: '',
      },
      bannedOptions: [{
        value: '1',
        label: '封禁7天'
      }, {
        value: '2',
        label: '封禁90天'
      }, {
        value: '3',
        label: '永久封禁'
      },],
      query: {
        pageNo: 1,
        pageSize: 10,
        content: '',
        nickName: '',
        createDate: '',
        authorId: '',
        bannedCode:'',

      },
      row: '',
      page: {
        count: 0,
        pageNumber: 1,
        pageSize: 10,
        list: []
      },
      searchData: {
        input1: "",
        input2: "",
      },
      editDialogVisible: false
    }
  },
  created() {
    this.commentAll();
  },

  methods: {
    unlock(index, row) {
      this.$confirm('是否确认解封评论账号为"' + row.account + '"的账号??', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        unlock(row.authorId).then(resp => {
          if (resp.success) {
            this.reload();
            this.$message({
              type: 'success',
              message: '解封成功'
            });
          } else {
            this.$message({
              type: 'error',
              message: '解封失败'
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消解封'
        });
      });
    },
    commentAll() {
      commentAll(this.query).then(resp => {
        this.page.list = resp.data.list;
        this.page.count = resp.data.total;
      })
    },

    onSubmit() {
      this.commentAll()
    },
    onReset() {
      this.query.content = "";
      this.query.nickName = "";
      this.commentAll()
    },
    /*    handleAdd() {
          this.addDialogVisible = true;
        },*/
    refresh() {
      this.$NProgress.start();
      this.$NProgress.done()
    },
    handleEdit(index, row) {
      this.query = row;
      this.editDialogVisible = true;
    },


    bannedVisible(index, row) {
      console.log(row)
      this.admin.author = row.account;
      this.admin.uid = row.authorId;
      this.bannedDialogVisible = true
    },
    handleSizeChange(size) {
      this.query.pageSize = size;
      this.commentAll();
    },
    handleCurrentChange(currentPage) {
      this.query.pageNo = currentPage;
      this.commentAll();
    },
    bannedAccount() {
      let token = localStorage.token;
      bannedAccount(this.admin, token).then(resp => {
        if (resp.success) {
          this.reload();
          this.$message({
            type: 'success',
            message: '封禁成功'
          });
          this.bannedDialogVisible = false
        } else {
          this.reload();
          this.$message({
            type: 'success',
            message: '封禁失败'
          });
        }
      })
    },

  }
}
</script>
<!--公共样式-->
<style>

</style>
